<template>
  <div class="lrcContainer">
    <div class="lrc" ref="lrc" v-if="hasLyric">
      <p
        class="lrc-p"
        :class="{
          active:
            currentTime >= allKeys[index] && currentTime < allKeys[index + 1],
        }"
        v-for="(item, key, index) in lrcData"
        :key="index"
      >
        <span>{{ item }}</span>
      </p>
    </div>
    <div v-else class="no-lyric">未获得歌词数据</div>
    <!-- 新增提示信息 -->
  </div>
</template>
  
  <script>
export default {
  name: "LRC",
  data() {
    return {
      lrcData: {},
      allKeys: [],
      currentTime: 0,
      timer: null,
      hasLyric: false, // 新增 hasLyric 状态
    };
  },
  props: {
    id: {
      type: [String, Number],
      required: true,
    },
  },
  mounted() {
    console.log(this.id);

    this.$api
      .getLRC({
        id: this.id,
      })
      .then((res) => {
        console.log("应用S23-5班24贾认真获取歌词数据:", res);
        console.log("-----------");

        if (res.lrc && res.lrc.lyric) {
          this.lrcData = res.lrc.lyric;
          this.filterLRC(res.lrc.lyric);
          this.startTimer();
          this.hasLyric = true; // 设置 hasLyric 为 true
        } else {
          this.hasLyric = false; // 设置 hasLyric 为 false
        }
      })
      .catch((error) => {
        console.error("Error fetching lyric data:", error);
        this.hasLyric = false; // 设置 hasLyric 为 false
      });
  },
  methods: {
    /**
     *
     * [01:37.19]:证明了飞行  -> {97:证明了飞行}
     * 107:证明了飞行
     * 120:在天空的磨样
     */
    filterLRC(values) {
      if (!values) return;
      var lrc = {};
      var lyrics = values.split("\n"); // 有问题，有的是 \n 有的是 空格
      var reg = /\[\d*:\d*(\.|:)\d*]/g;
      for (var i = 0; i < lyrics.length; i++) {
        var timeRegArr = lyrics[i].match(reg);
        if (!timeRegArr) continue;
        // 获取歌词
        var content = lyrics[i].replace(timeRegArr, "").trim();
        // 获取时间
        var t = timeRegArr[0];
        var min = parseInt(t.match(/\[\d*/i).toString().slice(1));
        var sec = parseFloat(t.match(/\:\d*/i).toString().slice(1));
        var time = min * 60 + sec;
        lrc[time] = content;
      }
      this.lrcData = lrc;
      this.getAllKeys(lrc);
    },
    getAllKeys(lrcArr) {
      this.allKeys = Object.keys(lrcArr)
        .map(Number)
        .sort((a, b) => a - b);
    },
    scrollLRC(newTime) {
      const index = this.allKeys.findIndex(
        (key, i) => newTime >= key && newTime < this.allKeys[i + 1]
      );
      if (index !== -1 && this.$refs.lrc) {
        this.$refs.lrc.style.top = -(30 * (index - 2)) + "px";
      }
    },
    startTimer() {
      this.timer = setInterval(() => {
        this.currentTime += 1; // 每秒增加1秒
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.timer);
    },
  },
};
</script>
  
  <style>
.active {
  color: red;
}

.lrcContainer {
  width: 100%;
  height: 150px;
  overflow: hidden;
  position: relative;
}

.lrc {
  width: 100%;
  position: absolute;
  top: 0;
}

.lrc-p {
  height: 30px;
  line-height: 30px;
}

.up30 {
  margin-top: -30px;
}

.no-lyric {
  color: red;
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
}
</style>